<template>
  <div class="wy-keyBoard" v-show="visible">
    <div class="wy-con">
      <section class="wy-board-title">
        <span class="close">
          <img src="./images/close.png" @click="closeBoard" />
        </span>
        请输入支付密码
      </section>
      <section class="wy-pay-word">
        <div class="pay-word-con">
          <!--关键点在于根据index取输入的密码数组对应的值-->
          <div class="pay-input" v-for="(item,index) in inputList" :key="index">
            <input type="password" disabled :value="passwordVal[index]">
          </div>
        </div>
      </section>
      <div class="wy-pay-btn" :class="{'red': passwordVal.length == inputList}" :style="{backgroundColor}" @click="inputOk">
        确认支付
      </div>
      <section v-if="$slots.prompt">
        <slot name="prompt"></slot>
      </section>
      <section class="wy-pay-keyBoard">
        <ul class="keyBoard-ul">
          <li class="keyBoard-li" v-for="(item,index) in keyBoardList" :key="index" @touchstart="keyDown(item,$event)" @touchend="pressEnd($event)">
            {{item}}
          </li>
          <li class="keyBoard-li"></li>
          <li class="keyBoard-li" @touchstart="keyDown(0,$event)" @touchend="pressEnd($event)">0</li>
          <li class="keyBoard-li delete" @touchstart="deleteKey()">
            <span class="delete-img">
              <img src="./images/delete_img.png" alt="">
            </span>
          </li>
        </ul>
      </section>
    </div>
  </div>
</template>

<script>
// 参数
// visible : 是否显示键盘
// passWordlength: 自定义密码长度
// pressKeyBgColor: 按下键盘的颜色
// 方法
// commit: 密码等于设置的密码长度时，提交订单支付

export default {
  name: 'Board',
  props: {
    'visible': {
      type: Boolean,
      default: false
    },
    'passWordlength': {
      type: Number,
      default: 6
    },
    'pressKeyBgColor': {
      type: String,
      default: '#f5f5f5'
    },
    'backgroundColor': {
      type: String,
      default: '#ee3f44'
    }
  },
  data() {
    return {
      inputList: this.passWordlength,
      keyBoardList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      passwordVal: [],
      isClosed: false
    };
  },
  watch: {
    visible(val) {
      if (val) {
        // 打开键盘，密码置空
        this.passwordVal = []
        this.isClosed = true
        this.$emit('open')
      } else {
        if (!this.isClosed) return
        this.$emit('close')
      }
    }
  },
  methods: {
    keyDown(key, event) {
      // 按下数字背景色
      event.target.style.backgroundColor = this.pressKeyBgColor
      if (this.passwordVal.length >= this.inputList) return
      this.passwordVal.push(key)
    },
    deleteKey() {
      if (this.passwordVal.length == 0) return
      this.passwordVal = this.passwordVal.slice(0, this.passwordVal.length - 1)
    },
    pressEnd(event) {
      // 手指抬起恢复默认颜色
      event.target.style.backgroundColor = '#fff'
    },
    closeBoard() {
      this.$emit('update:visible', false)
      this.$emit('close')
      this.isClosed = false 
    },
    inputOk() {
      if (this.passwordVal.length < this.inputList) return
      this.$emit('commit', this.passwordVal.join(''))
    }
  }
};
</script>

<style>
@import './css/reset.css';
.wy-keyBoard {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.wy-keyBoard img {
  display: inline-block;
  width: 100%;
}
.wy-con {
  position: absolute;
  left: 0;
  bottom: 0;
  height: auto;
  width: 100%;
  text-align: center;
  background: #fff;
}

.wy-board-title {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #ececec;
}
.wy-board-title .close {
  width: 16px;
  height: 16px;
  line-height: normal;
  position: absolute;
  left: 15px;
  top: 15px;
}
.wy-board-title .close img {
  display: inline-block;
  width: 100%;
}
.wy-pay-word {
  width: 100%;
}
.wy-pay-word .pay-word-con {
  display: inline-flex;
  margin: 20px auto 15px;
  width: 84%;
  border: 1px solid #9f9f9f;
}
.wy-con .pay-input {
  flex: 1;
  height: 42px;
  line-height: 42px;
  font-size: 18px;
  color: #333;
  border-right: 1px solid #ddd;
}
.wy-con .pay-input:last-child {
  border-right: none;
}
.wy-con .pay-input input {
  width: 100%;
  height: 100%;
  text-align: center;
}
.wy-pay-btn {
  margin: 0 auto 15px;
  width: 84%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  opacity: 0.5;
  text-align: center;
}
.wy-pay-btn.red {
  opacity: 1;
}
.wy-pay-keyBoard {
  background: rgba(210, 213, 219, 0.9);
  height: 217px;
}
.wy-pay-keyBoard .keyBoard-ul {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-content: center;
}
.wy-pay-keyBoard .keyBoard-li {
  width: 30%;
  margin: 3px 4px;
  height: 47px;
  line-height: 47px;
  background: #ffffff;
  box-shadow: 0 1px 0 0 #848688;
  border-radius: 5px;
  font-size: 21px;
  text-align: center;
}
.wy-pay-keyBoard .keyBoard-li:nth-child(10) {
  opacity: 0;
}
.wy-pay-keyBoard .keyBoard-li.delete {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 0;
}
.wy-pay-keyBoard .keyBoard-li.delete .delete-img {
  display: inline-block;
  width: 24px;
  height: auto;
}
</style>
